<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-container">
				<picker v-if="queryList.length > 1" mode="selector" :range="queryList" range-key="queryName"
					:value="queryIndex" @change="queryChange" class="type-picker">
					<view class="picker-content">
						<image class="filter-icon" src="/static/filter.png"></image>
					</view>
				</picker>
				<view v-if="queryIndex == 0" class="search-input">
					<input v-model="searchForm.dingdanbianhao" type="text" placeholder="输入商品名称搜索" class="search-field"
						placeholder-class="placeholder-style" />
				</view>
				<button @tap="search" class="search-btn">搜 索</button>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-card" v-for="(product, index) in list" :key="index">
				<view class="order-header">
					<text class="order-number">{{ product.id }}</text>
					<view class="status-tag">{{ product.status?product.status:'进行中' }}</view>
				</view>

				<view class="order-body" @tap="onDetailTap(product)">
					<image class="product-image" :src="_imgUrl + (product.photo ? product.photo.split(',')[0] : '')"
						mode="aspectFill"></image>
					<view class="product-info">
						<view class="">
							<text class="product-title">{{ product.name }}</text>
							<view class="meta-info">
								<text class="price">¥{{ product.price }}</text>
								<text class="quantity">x{{ product.spNumber }}</text>
							</view>
						</view>
						<view class="meta-info">
							<text></text>

							<text class="price"
								style="text-align: right;">总价：¥{{ product.price * product.spNumber }}</text>
						</view>
					</view>

				</view>

				<view class="order-actions">
					<text v-if="isAuth('dingdanxinxi', '修改')" class="action-btn edit-btn"
						@click.stop="onUpdateTap(product.id)">
						<view class="cuIcon-edit"></view>修改
					</text>
					<text v-if="isAuth('dingdanxinxi', '删除')" class="action-btn delete-btn"
						@click.stop="onDeleteTap(product.id)">
						<view class="cuIcon-delete"></view>删除
					</text>
				</view>
			</view>
		</view>

		<!-- 新增按钮 -->
		<button v-if="isAuth('dingdanxinxi', '新增')" class="add-btn" @click="onAddTap()">
			<view class="cuIcon-add"></view>
		</button>
	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				btnColor: [
					"#409eff",
					"#67c23a",
					"#909399",
					"#e6a23c",
					"#f56c6c",
					"#356c6c",
					"#351c6c",
					"#f093a9",
					"#a7c23a",
					"#104eff",
					"#10441f",
					"#a21233",
					"#503319",
				],
				queryList: [{
					queryName: "订单编号",
				}, ],
				sactiveItem: {
					padding: "0 28rpx",
					boxShadow: "0 0 12rpx rgba(0,0,0,.3)",
					margin: "0 12rpx",
					borderColor: "rgba(0,0,0,1)",
					backgroundColor: "#333",
					color: "#fff",
					borderRadius: "8rpx",
					borderWidth: "0",
					width: "auto",
					lineHeight: "68rpx",
					fontSize: "28rpx",
					borderStyle: "solid",
				},
				sitem: {
					padding: "0 20rpx",
					boxShadow: "0 0 12rpx rgba(0,0,0,.3)",
					margin: "0 12rpx",
					borderColor: "rgba(0,0,0,1)",
					backgroundColor: "#fff",
					color: "#333",
					borderRadius: "8rpx",
					borderWidth: "0",
					width: "auto",
					lineHeight: "68rpx",
					fontSize: "28rpx",
					borderStyle: "solid",
				},
				queryIndex: 0,
				list: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: "~ 没有更多了 ~",
				},
				hasNext: true,
				searchForm: {},
				CustomBar: "0",
				_imgUrl: '',
				roles: '',
				pageCount:0,
				total:0
			};
		},
		async onShow() {
			this._imgUrl = this.$base.url;
			this.roles = uni.getStorageSync('roles')
			this.btnColor = this.btnColor.sort(() => {
				return 0.5 - Math.random();
			});
			this.hasNext = true;
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll();
		},
		onLoad() {
			this.hasNext = true;
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll();
		},
		methods: {
			//查询条件切换
			queryChange(e) {
				this.queryIndex = e.detail.value;
				this.searchForm.dingdanbianhao = "";
			},
			//类别搜索
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.hasNext = true;
				// 重置分页参数页数为1
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				let params = {
					pageNum: mescroll.num,
					pageSize: mescroll.size,
					// pageSize: 2
				};

				

				if (this.roles == 'yonghu') {
					// params.remark = uni.getStorageSync('userInfo').userId
				} else if (this.roles == 'maijia') {
					params.remark = uni.getStorageSync('userInfo').userId
				}
				let res = await this.$api.list(`order`, params);
				this.total = res.total
				if (this.pageCount == this.total) {
					mescroll.endSuccess(mescroll.size, this.hasNext);
					return
				}
				// 如果是第一页数据置空
				if (mescroll.num == 1) this.list = [];
				this.list = this.list.concat(res.rows);
				this.pageCount = this.list.length
				// this.list = res.rows
				if (res.rows.length == 0) this.hasNext = false;
				mescroll.endSuccess(mescroll.size, this.hasNext);
			},
			// 详情
			onDetailTap(item) {
				this.$utils.jump(`./detail?id=${item.id}`);
			},
			// 修改
			onUpdateTap(id) {
				this.$utils.jump(`./add-or-update?id=${id}`);
			},
			// 添加
			onAddTap() {
				this.$utils.jump(`./add-or-update`);
			},
			onDeleteTap(id) {
				var _this = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除",
					success: async function(res) {
						if (res.confirm) {
							await _this.$api.del("dingdanxinxi", JSON.stringify([id]));
							_this.hasNext = true;
							// 重置分页参数页数为1
							_this.mescroll.resetUpScroll();
						}
					},
				});
			},
			// 搜索
			async search() {
				this.mescroll.num = 1;
				let searchForm = {
					pageNum: this.mescroll.num,
					pageSize: this.mescroll.size,
				};
				if (this.searchForm.dingdanbianhao) {
					// searchForm["name"] =
					// 	"%" + this.searchForm.dingdanbianhao + "%";
					searchForm["name"] = this.searchForm.dingdanbianhao;
				}
				let res = await this.$api.list(`order`, searchForm);
				// 如果是第一页数据置空
				if (this.mescroll.num == 1) this.list = [];
				this.list = this.list.concat(res.rows);
				if (res.rows.length == 0) this.hasNext = false;
				this.mescroll.endSuccess(this.mescroll.size, this.hasNext);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search-bar {
		padding: 24rpx 32rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.search-container {
		display: flex;
		align-items: center;
		background: #f8f9ff;
		border-radius: 48rpx;
		padding: 12rpx 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);
	}

	.type-picker {
		.picker-content {
			padding-right: 24rpx;
		}

		.filter-icon {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.search-input {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.search-field {
		flex: 1;
		font-size: 28rpx;
		color: #2d3748;
		padding: 0 24rpx;
	}

	.search-icon {
		color: #667eea;
		font-size: 36rpx;
	}

	.search-btn {
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		border-radius: 40rpx;
		padding: 0 48rpx;
		height: 72rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.order-list {
		padding: 24rpx 32rpx;
	}

	.order-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-radius: 24rpx;
		margin-bottom: 32rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #f1f3fe;

		.order-number {
			font-size: 28rpx;
			color: #718096;
		}

		.status-tag {
			background: rgba(102, 126, 234, 0.1);
			color: #667eea;
			padding: 8rpx 24rpx;
			border-radius: 24rpx;
			font-size: 24rpx;
		}
	}

	.order-body {
		display: flex;
		padding: 32rpx 0;

		.product-image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.product-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 50rpx;
		}

		.product-title {
			font-size: 32rpx;
			color: #2d3748;
			font-weight: 500;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.meta-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.price {
				color: #ff4757;
				font-size: 36rpx;
				font-weight: 700;
			}

			.quantity {
				color: #718096;
				font-size: 28rpx;
			}
		}
	}

	.order-actions {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f1f3fe;

		.action-btn {
			display: flex;
			align-items: center;
			padding: 12rpx 32rpx;
			border-radius: 40rpx;
			font-size: 26rpx;

			.cuIcon {
				margin-right: 8rpx;
				font-size: 32rpx;
			}

			&.edit-btn {
				background: rgba(102, 126, 234, 0.1);
				color: #667eea;
			}

			&.delete-btn {
				background: rgba(255, 71, 87, 0.1);
				color: #ff4757;
			}
		}
	}

	.add-btn {
		position: fixed;
		right: 48rpx;
		bottom: 128rpx;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.cuIcon-add {
			font-size: 48rpx;
		}
	}

	.placeholder-style {
		color: #a0aec0;
	}
</style>